.character-wrapper{
    height: calc(100vh - 190px);
    width: calc(100% - 264px);
    overflow-y: scroll;

    .list-wrapper{
        padding: 24px 32px;

        .character-list{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 0 0 0 -40px;

            .character-item{
                margin: 0 17px 20px 0;

                &:nth-child(8n){margin-right: 0;}

                >a{
                    display: block;
                    width: 150px;
                    height: 198px;
                    position: relative;

                    >img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }

                    >p{
                        margin: 0;
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        color: #fff;
                        background-color: rgba($color: #7D0121, $alpha: 0.7);
                        font-size: 14px;
                        font-weight: 600;
                        text-align: center;
                        padding: 10px 0;
                    }
                }
            }
        }
    }
}